HTML 简介和历史
概述
HTML（HyperText Markup Language）是构建网页的基础语言。它使用标签（tags）来定义网页的结构和内容。HTML 不仅仅是一种标记语言，它还承载着丰富的历史和不断发展的技术。
HTML 的历史
1. 早期阶段
- 1991年：Tim Berners-Lee 发明了 HTML，作为万维网（World Wide Web）的基础。最初的 HTML 版本非常简单，只有 18 个标签。
- 1993年：HTML 1.0 发布，增加了一些基本的标签，如
<h1>到<h6>标题标签和<p>段落标签。
2. 标准化
- 1995年：HTML 2.0 发布，这是第一个由 IETF（Internet Engineering Task Force）标准化的版本。
- 1997年：HTML 3.2 发布，增加了更多的标签和属性，如表格和表单元素。
- 1999年：HTML 4.01 发布，引入了框架、样式表和脚本的支持。
3. HTML5 时代
- 2014年：HTML5 正式发布，这是一个重大的更新，引入了许多新特性和 API，如
<video>、<audio>和<canvas>。
HTML 的基本结构
一个基本的 HTML 文档包含以下结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
</body>
</html>
解释
<!DOCTYPE html>：声明文档类型为 HTML5。<html>：HTML 文档的根元素。<head>：包含文档的元数据（metadata），如字符集、视口设置和标题。<body>：包含网页的实际内容。
常用标签和属性
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
段落标签
<p>这是一个段落。</p>
链接标签
<a href="https://www.example.com">访问示例网站</a>
图像标签
<img src="image.jpg" alt="描述图片的文本">
实践练习
练习 1：创建一个简单的网页
- 打开你的文本编辑器（如 VS Code、Sublime Text）。
- 创建一个新的文件，并将其保存为
index.html。 - 输入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网页</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">访问示例网站</a>
<img src="image.jpg" alt="描述图片的文本">
</body>
</html>
- 保存文件并在浏览器中打开
index.html文件，查看效果。
练习 2：添加更多内容
- 在
<body>标签内添加更多的标题和段落。 - 添加一个列表：
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
- 保存并刷新浏览器，查看更新后的网页。
总结
通过本教程，你已经了解了 HTML 的基本概念和历史，学会了如何创建一个简单的 HTML 文档，并进行了一些基本的实践练习。接下来，我们将深入学习 HTML 的更多特性和高级功能。
希望这篇教程能帮助你更好地理解 HTML 的基础知识。继续探索，你会发现 HTML 的世界非常广阔且有趣！